<template>
  <div class="merchat-list">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="list-title">查询条件</div>
    <Row type="flex">
      <Form ref="formInline" :model="formInline" inline :label-width="0" label-position="left">
        <FormItem label="" prop="searchContent">
          <Input type="text" v-model="formInline.companyName" placeholder="公司名称" clearable style="width: 300px;" />
        </FormItem>
        <FormItem prop="date" label="">
          <DatePicker ref="datePicker" type="daterange" @on-change="selectDate" placeholder="请选择时间" style="width: 200px;"></DatePicker>
        </FormItem>
        <div class="form-but">
          <Button type="success" @click="getList">查询</Button>
          &nbsp;&nbsp;
          <Button @click="handleReset('formInline')">清空</Button>
          &nbsp;&nbsp;
          <Button type="warning" @click="exportSmsHistorySummary()">生成统计文件</Button>
          &nbsp;&nbsp;
          <a v-show="uploadFailed" :href="exportUrl" download="短信发送统计.xlsx">
            点击下载
            <Icon type="md-cloud-download" size="16" />
          </a>
        </div>
      </Form>
    </Row>
    <div>
      <Table class="list-table" stripe border ref="selection" :columns="columns" :data="dataList"></Table>
      <Spin size="large" fix v-if="spinShow">快速生成中,不要着急,不要着急...</Spin>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { formatTime } from "@/utils";
import Api from "@/api";

const systemSmsHistoryApi = Api.SystemSmsHistory;

export default {
  name: "login",
  components: {},
  data() {
    return {
      breadcrumb: ["系统管理", "短信发送统计"],
      formInline: {
        companyName: "",
        createTimeStart: "",
        createTimeEnd: "",
      },
      dataList: [],
      columns: [
        {
          title: "公司名称",
          key: "companyName",
          minWidth: 180,
        },
        {
          title: "发送数量",
          key: "sendCount",
          minWidth: 250,
          tooltip: true,
        },
      ],
      total: 0,
      uploadFailed: false,
      exportUrl: "",
      spinShow: false,
    };
  },
  methods: {
    selectDate(date) {
      this.formInline.createTimeStart = date[0];
      this.formInline.createTimeEnd = date[1];
    },
    async handleReset(name) {
      this.formInline.companyName = "";
      this.formInline.createTimeStart = "";
      this.formInline.createTimeEnd = "";
      this.getList();
    },
    async getList(paramsPage = null) {
      this.uploadFailed = false;
      const formInline = this.formInline;
      const value = {};
      Object.keys(formInline).forEach((key) => {
        if (formInline[key]) {
          value[key] = formInline[key];
        }
      });
      const params = {
        ...value,
      };
      const { responseCode, data } = await this.$request(
        systemSmsHistoryApi.smsHistorySummaryList,
        params
      );
      if (responseCode === "1") {
        this.dataList = data.list;
        this.total = data.totalCount;
      }
    },
    exportSmsHistorySummary() {
      const _self = this;
      _self.spinShow = true;
      _self.uploadFailed = false;
      const api = systemSmsHistoryApi.smsHistorySummaryExport;
      axios({
        method: api.methods,
        url: api.url,
        responseType: api.responseType,
        headers: {
          "qf-channel-bomc-token": sessionStorage.getItem("token"),
          "Content-Type": "application/json",
        },
        params: _self.formInline,
      }).then((res) => {
        _self.spinShow = false;
        _self.uploadFailed = true;
        console.log(res);
        const blob = new Blob([res.data], {
          type: "application/vnd.ms-excel", // 将会被放入到blob中的数组内容的MIME类型
        });
        const objectUrl = URL.createObjectURL(blob);
        this.exportUrl = objectUrl;
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.merchat-list {
  .ivu-form-item {
    margin-right: 20px;
  }
  .form-but {
    display: inline-block;
    margin-bottom: 24px;
  }
  .list-title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #333;
  }
  .add {
    margin-bottom: 10px;
  }
  .table-page {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }
  .ivu-table .table-success-row td {
    background-color: greenyellow;
    color: #fff;
  }
  .ivu-table .table-fail-row td {
    background-color: red;
    color: #fff;
  }
}
</style>
